import React from 'react';


function App() {
    return (
        <div className="App">
            <h1>Hello</h1>
            <Person name={"晓慧"} content={<button>commit</button>} />
            <Animal name={"猫"} content={<button>commit</button>} />
        </div>
    );
}

interface PersonProps {
    name: string;
    content?: React.ReactElement;
}

const Animal: React.FunctionComponent<PersonProps> = (props) => {
    return (
        <div>
            <h3 >{props.name}</h3>
            {props.content}
        </div>
    )
}


function Person(props: PersonProps) {
    return (
        <div>
            <h3 >{props.name}</h3>
            {props.content}
        </div>
    )
}

// interface Person(props: { name: string}) {
//     return (
//         <h3 >晓慧</h3>
//     )
// }
export default App;